Getting Pixel from image

Live Editor

function PixelChecker() {
  const [postion, setPosition] = useState({ x: 0, y: 0 });

  return (
    <div>
      <div>{`x: ${postion.x}, y: ${postion.y}`}</div>
      {useMemo(
        () => (
          <ImageMapForPixel
            imageSrc="/img/docusaurus.png"
            height="500px"
            width="700px"
            fullscreenControl
            onClick={setPosition}
          ></ImageMapForPixel>
        ),
        []
      )}
    </div>
  );
}

Result

Loading...

property	type	description
imageSrc	string	이미지 경로
height	string	창 높이(이미지 높이X)
width	string	창 너비(이미지 너비X)
onClick	({x, y }) => void	이미지의 좌표 추출
children	ReactNode	지도 아래에 사용할 수 있는 컴포넌트들